<template>
    <div v-loading="loading" element-loading-background="transparent">
        <el-table :data="data" :row-style="showTr" style="width: 100%" border>
            <el-table-column :label="indexColumn.text">
                <template slot-scope="scope">
                    <span v-if="spaceIconShow(0)">
                        <span
                            v-for="(space, levelIndex) of scope.row._level"
                            class="ms-tree-space"
                            :key="levelIndex"
                        ></span>
                    </span>
                    <span v-if="toggleIconShow(0, scope.row)" @click="toggle(scope.$index)">
                        <a href="javascript:;">
                            <i
                                v-if="!scope.row._expanded"
                                class="el-icon-caret-right"
                                aria-hidden="true"
                            ></i>
                            <i
                                v-if="scope.row._expanded"
                                class="el-icon-caret-bottom"
                                aria-hidden="true"
                            ></i>
                        </a>
                    </span>
                    <!-- <span class="ms-tree-space"></span> -->
                    {{scope.row[indexColumn.dataIndex]}}
                </template>
            </el-table-column>
            <slot></slot>
        </el-table>
    </div>
</template>
<script>
import Utils from './tree'
//  import Vue from 'vue'
export default {
    props: {
        queryCallback: Function,
        // 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
        treeStructure: {
            type: Boolean,
            default: function () {
                return false
            }
        },
        indexColumn: Object,
        // 是否默认展开所有树
        defaultExpandAll: {
            type: Boolean,
            default: function () {
                return false
            }
        }
    },
    created() {
        this.queryData()
    },
    data() {
        return {
            loading: false,
            dataSource: [], // 这是数据源
        }
    },
    computed: {
        // 格式化数据源
        data() {
            let me = this
            if (me.treeStructure) {
                let data = Utils.MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll)
                data.forEach(item => {
                    item._children = item.children
                    item.children = null
                })
                return data
            }
            return me.dataSource
        }
    },
    methods: {
        // 显示行
        showTr(row, index) {
            let show = (row.row._parent ? (row.row._parent._expanded && row.row._parent._show) : true)
            row.row._show = show
            return show ? '' : 'display:none;'
        },
        // 展开下级
        toggle(trIndex) {
            let record = this.data[trIndex]
            record._expanded = !record._expanded
        },
        // 显示层级关系的空格和图标
        spaceIconShow(index) {
            if (this.treeStructure && index === 0) {
                return true
            }
            return false
        },
        // 点击展开和关闭的时候，图标的切换
        toggleIconShow(index, record) {
            if (this.treeStructure && index === 0 && record._children && record._children.length > 0) {
                return true
            }
            return false
        },
        queryData() {
            this.loading = true
            this.queryCallback().then(data => {
                this.dataSource = data
                this.loading = false
            }).catch(err => {
                this.loading = false
                this.$message.error(err.message)
            })
        },
        refresh() {
            this.queryData()
        }
    }
}
</script>
<style scoped>
.ms-tree-space {
    position: relative;
    top: 1px;
    display: inline-block;
    /* font-family: "Glyphicons Halflings"; */
    /* font-style: normal; */
    /* font-weight: 400; */
    line-height: 1;
    width: 30px;
    height: 14px;
}
.ms-tree-space::before {
    content: "";
}
/* table td {
    line-height: 26px;
} */
</style>